<template>
	<view class="page">
		<view class="tab-box">
			<u-tabs :list="list" @click="click" lineWidth="0"
				:activeStyle="{ color: '#3662EC', fontWeight: 'bold' }"></u-tabs>
		</view>
		<!--  -->
		<view class="content" v-if="index == 0">
			<Table :thList="thList" :tdList="tdList" stripe />
		</view>
		<view class="content" v-if="index == 1">
			1
		</view>
	</view>
</template>

<script >
export default {
	data() {
		return {
			list: [
				{ name: '余量监测' },
				{ name: '补液派单' },
			],
			index: 0,
			thList: [
				{ index: 0, content: '商品类型' },
				{ index: 1, content: '标号（升）' },
				{ index: 2, content: '初期存量' },
				{ index: 3, content: '出库明细' },
				{ index: 4, content: '当前库存' },
			],
			tdList: [
				{
					index: 0,
					data: [
						{ index: 0, content: '甲醇' },
						{ index: 1, content: 'M100' },
						{ index: 2, content: '800' },
						{ index: 3, content: '300' },
						{ index: 4, content: '500' },
					]
				},
				{
					index: 1,
					data: [
						{ index: 0, content: '甲醇' },
						{ index: 1, content: 'M85' },
						{ index: 2, content: '800' },
						{ index: 3, content: '300' },
						{ index: 4, content: '500' },
					]
				},
				{
					index: 2,
					data: [
						{ index: 0, content: '甲醇' },
						{ index: 1, content: 'M85' },
						{ index: 2, content: '800' },
						{ index: 3, content: '300' },
						{ index: 4, content: '500' },
					]
				},
			]
		}
	},
	methods: {
		click(item) {
			this.index = item.index
		}

	}
}


</script>

<style lang="scss" scoped>
.tab-box {
	background-color: white;
	padding-left: 20rpx;
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
}

.page {
	display: flex;
	flex-direction: column;

	.content {
		display: flex;
		flex: 1;
		overflow: auto;
		background-color: white;
	}

}

table {
	width: 100%;
}
</style>
